<script setup>
import './flexible.js'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 模拟后台数据
const clothesData = ref(['帽子', '高跟鞋', '袜子', '裤子', '衬衫', '周鑫'])

const chart = ref(null) // 将 chart 引用声明放在组件级别

const getEcharts1 = () => {
  const chartOptions = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: clothesData.value
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  }

  let chartInstance1 = echarts.init(chart.value) // 使用正确的 DOM 元素
  chartInstance1.setOption(chartOptions)
}

onMounted(() => {
  getEcharts1()
})
</script>
<template>

</template>

<style scoped>

</style>
